import React, { PureComponent } from 'react';
import { PrimaryGhostC } from '../../../comps';
import { Popover, Tree, Button, message } from 'antd';
import { connect } from 'dva';
import _ from 'lodash';
import style from './index.less';

@connect(({ ratingmonitoringM }) => ({
  ratingmonitoringM,
}))
export default class SetColumns extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selectedKeys: [],
      checkedKeysInfo: [], //
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const init = JSON.stringify(this.state.checkedKeysInfo);
    const initN = !nextProps.checkedKeysInfo ? '' : JSON.stringify(nextProps.checkedKeysInfo[Number(nextProps.type)].checkedKeys);
    if (init != initN) {
      this.setState({
        checkedKeysInfo: _.cloneDeep(nextProps.checkedKeysInfo[Number(nextProps.type)].checkedKeys),
      });
    }
  }

  handleVisibleChange = (visible) => {
    this.setState({
      visible: visible,
    });
  };

  onSelect = (selectedKeys, info) => {
    this.setState({
      checkedKeysInfo: selectedKeys,
    });
  };

  cancelAction = () => {
    const {
      ratingmonitoringM: { checkedKeysInfo },
      type,
    } = this.props;
    this.setState({
      visible: false,
      checkedKeysInfo: _.cloneDeep(checkedKeysInfo)[Number(type)].checkedKeys,
    });
  };

  handleOk = () => {
    const {
      ratingmonitoringM: { columnsInfo, checkedKeysInfo },
      type,
    } = this.props;
    const newType = Number(type);

    if (this.state.checkedKeysInfo.length == 0) {
      message.warning('请至少选择一列');
      return;
    }
    let newColumnsInfo = _.cloneDeep(columnsInfo);
    let NewCheckedKeysInfo = _.cloneDeep(checkedKeysInfo);
    newColumnsInfo[newType].columns.map((item) => {
      item.display = false;
      this.state.checkedKeysInfo.map((item1) => {
        if (item1 == item.key) {
          item.display = true;
        }
      });
    });

    if (newType == 0) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        0: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 1) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        1: { checkedKeys: this.state.checkedKeysInfo },
      };
    }
    if (newType == 2) {
      NewCheckedKeysInfo = {
        ...NewCheckedKeysInfo,
        2: { checkedKeys: this.state.checkedKeysInfo },
      };
    }

    this.setState({
      visible: false,
    });
    this.props
      .dispatch({
        type: 'ratingmonitoringM/saveCol',
        payload: {
          type: this.props.colType,
          columns: newColumnsInfo[newType].columns,
        },
      })
      .then((res) => {
        if (res && res.code == 0) {
          this.props.dispatch({
            type: 'ratingmonitoringM/setState',
            payload: {
              checkedKeysInfo: NewCheckedKeysInfo,
              columnsInfo: newColumnsInfo,
            },
          });
        } else {
          message.error('保存失败！');
        }
      });
  };

  render() {
    const {
      ratingmonitoringM: { columnsInfo },
      type,
    } = this.props;
    const newType = Number(type);
    const content = (
      <div>
        <Tree treeData={columnsInfo[newType].treeData} checkable defaultExpandAll checkedKeys={this.state.checkedKeysInfo} onCheck={this.onSelect} />
        <div className='btnArea'>
          <div className='btnCol'>
            <Button onClick={this.cancelAction} className='reset-button ' style={{ marginLeft: '56px' }}>
              取消
            </Button>
            <Button onClick={this.handleOk} className='search-button ' style={{ marginLeft: '11px' }}>
              确定
            </Button>
          </div>
        </div>
      </div>
    );

    return (
      <div>
        <Popover
          placement='bottomLeft'
          content={content}
          trigger='click'
          visible={this.state.visible}
          overlayClassName={style.shstyle}
          onVisibleChange={this.handleVisibleChange}
          style={{ height: '317px', width: '240px' }}
        >
          <PrimaryGhostC title='列选择' />
        </Popover>
      </div>
    );
  }
}
